<template>
	<view class="vistorProFile">
		<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<view class="wrap">
				<view>
					<view class="logo">
						<image src="https://blxlcp.cn/profile/upload/2025/07/08/logo_20250708102241A001.png"></image>
						<view>个人信息档案</view>
					</view>
					<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item required labelWidth="130" label="姓名" prop="nickName" borderBottom ref="item2">
							<u-input placeholder="请输入姓名" v-model="model1.nickName" border="none"></u-input>
						</u-form-item>
						<u-form-item
							label="性别"
							required
							labelWidth="130"
							prop="sexLabel"
							borderBottom
							@click="
								showSex = true;
								hideKeyboard();
							"
							ref="item3"
						>
							<u-input v-model="model1.sexLabel" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item required borderBottom labelWidth="130" label="年龄" prop="age">
							<u-input type="number" placeholder="请输入年龄" v-model="model1.age" border="none"></u-input>
						</u-form-item>
						<u-form-item required labelWidth="130" label="手机号码" prop="phoneNumber" borderBottom ref="item4">
							<u-input placeholder="请输入手机号码" v-model="model1.phoneNumber" border="none"></u-input>
						</u-form-item>
						<u-form-item
							label="学历"
							required
							labelWidth="130"
							prop="educationLabel"
							borderBottom
							@click="
								educationShow = true;
								hideKeyboard();
							"
							ref="item1"
						>
							<u-input v-model="model1.educationLabel" disabled disabledColor="#ffffff" placeholder="请选择学历" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item
							label="部门"
							required
							labelWidth="130"
							prop="enterpriseDept"
							borderBottom
							@click="
								enterpriseDeptShow = true;
								hideKeyboard();
							"
							ref="item1"
						>
							<u-input v-model="model1.enterpriseDept" disabled disabledColor="#ffffff" placeholder="请选择部门" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item borderBottom labelWidth="130" label="职业" prop="occupation">
							<u-input placeholder="请输入职业" v-model="model1.occupation" border="none"></u-input>
						</u-form-item>

						<u-form-item
							label="婚姻情况"
							labelWidth="130"
							prop="maritalStatusLabel"
							borderBottom
							required
							@click="
								maritalStatusShow = true;
								hideKeyboard();
							"
							ref="item3"
						>
							<u-input v-model="model1.maritalStatusLabel" disabled disabledColor="#ffffff" placeholder="请选择婚姻情况" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item
							label="有无心理病史"
							labelWidth="130"
							required
							prop="medicalHistoryStatusLabel"
							borderBottom
							@click="
								medicalHistoryStatusShow = true;
								hideKeyboard();
							"
							ref="item3"
						>
							<u-input v-model="model1.medicalHistoryStatusLabel" disabled disabledColor="#ffffff" placeholder="请选择有无心理病史" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item v-if="model1.medicalHistoryStatus == 1" labelPosition="top" borderBottom labelWidth="120" label="病史描述" prop="medicalHistoryDescribe">
							<u--textarea style="height: 300rpx !important" placeholder="请输入心理病史描述" v-model="model1.medicalHistoryDescribe" border="none"></u--textarea>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</scroll-view>
		<view class="btn">
			<view @click="submit">保存</view>
		</view>
		<u-picker :show="educationShow" :columns="educationList" keyName="label" title="请选择学历" @cancel="educationShow = false" @confirm="educationSelect"></u-picker>
		<u-picker
			:show="enterpriseDeptShow"
			:columns="enterpriseDeptList"
			keyName="label"
			title="请选择部门"
			@cancel="enterpriseDeptShow = false"
			@confirm="enterpriseDeptSelect"
		></u-picker>
		<u-picker
			:show="maritalStatusShow"
			:columns="maritalStatusList"
			keyName="label"
			title="请选择婚姻情况"
			@cancel="maritalStatusShow = false"
			@confirm="maritalStatusSelectCopy"
		></u-picker>
		<u-picker
			:show="medicalHistoryStatusShow"
			:columns="medicalHistoryStatusList"
			keyName="label"
			title="请选择有无心理病史"
			@cancel="medicalHistoryStatusShow = false"
			@confirm="medicalHistoryStatusSelectCopy"
		></u-picker>
		<u-picker :show="showSex" keyName="label" :columns="sexList" title="请选择性别" @cancel="showSex = false" @confirm="sexSelect"></u-picker>
	</view>
</template>

<script>
import { addConsultationRecord, getEnterpriseList } from '@/api/consult/index.js';
import { GetWxMiniProgramUrlParam } from '@/utils/common.js';
export default {
	data() {
		return {
			enterpriseId: 0,
			appraisalId: 0,
			qrId: 0,
			showSex: false,
			model1: {
				nickName: '',
				sex: '',
				sexLabel: '',
				age: '',
				phoneNumber: '',
				education: '', //学历
				educationLabel: '',
				occupation: '',
				maritalStatus: '', //婚姻情况
				maritalStatusLabel: '',
				medicalHistoryStatus: '0', //有无心理病史
				medicalHistoryStatusLabel: '',
				medicalHistoryDescribe: '',
				enterpriseDeptId: '',
				enterpriseDept: ''
			},
			educationList: [
				[
					{
						id: 1,
						label: '小学'
					},
					{
						id: 2,
						label: '初中'
					},
					{
						id: 3,
						label: '高中'
					},
					{
						id: 5,
						label: '本科'
					},
					{
						id: 6,
						label: '研究生'
					},
					{
						id: 7,
						label: '研究生以上'
					},
					{
						id: 4,
						label: '大专'
					}
				]
			],
			educationShow: false,
			sexList: [
				[
					{
						id: 0,
						label: '男'
					},
					{
						id: 1,
						label: '女'
					},
					{
						id: 2,
						label: '未知'
					}
				]
			],
			enterpriseDeptList: [],
			enterpriseDeptShow: false,
			maritalStatusList: [
				[
					{
						id: 1,
						label: '已婚'
					},
					{
						id: 2,
						label: '未婚'
					},
					{
						id: 3,
						label: '丧偶'
					},
					{
						id: 4,
						label: '离异'
					}
				]
			],
			maritalStatusShow: false,
			medicalHistoryStatusList: [
				[
					{
						id: 0,
						label: '无'
					},
					{
						id: 1,
						label: '有'
					}
				]
			],
			medicalHistoryStatusShow: false,
			rules: {
				age: {
					type: 'string',
					required: true,
					message: '请输入年龄',
					trigger: ['blur', 'change']
				},
				educationLabel: {
					type: 'string',
					required: true,
					message: '请选择学历',
					trigger: ['blur', 'change']
				},
				enterpriseDept: {
					type: 'string',
					required: true,
					message: '请选择部门',
					trigger: ['blur', 'change']
				},
				maritalStatusLabel: {
					type: 'string',
					required: true,
					message: '请选择婚姻情况',
					trigger: ['blur', 'change']
				},
				medicalHistoryStatusLabel: {
					type: 'string',
					required: true,
					message: '请选择有无心理病史',
					trigger: ['blur', 'change']
				},
				nickName: {
					type: 'string',
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				},
				sexLabel: {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				},
				phoneNumber: [
					{
						type: 'string',
						required: true,
						message: '手机号码不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (value) {
								const phoneReg = /^(13[0-9]|14[5-9]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
								if (!phoneReg.test(value)) {
									callback(new Error('请输入有效的11位手机号码'));
								} else {
									callback();
								}
							}
						},
						trigger: ['blur']
					}
				]
			}
		};
	},
	onLoad(options) {
		console.log(options);
		// 获取到二维码原始链接内容，即上图生成二维码的地址。
		if (options.q) {
			const url = decodeURIComponent(options.q);
			if (url !== 'undefined') {
				let params = GetWxMiniProgramUrlParam(url); //获取二维码路径参数
				this.appraisalId = params.appraisalId;
				this.qrId = params.qrId;
				this.enterpriseId = params.enterpriseId;
				getEnterpriseList({
					parentId: this.enterpriseId
				}).then((res) => {
					res.rows.forEach((item) => {
						item.label = item.enterpriseName;
					});
					this.enterpriseDeptList = [res.rows];
				});
			}
		} else {
			this.appraisalId = 8;
			this.qrId = 21;
			getEnterpriseList({
				parentId: 65
			}).then((res) => {
				res.rows.forEach((item) => {
					item.label = item.enterpriseName;
				});
				this.enterpriseDeptList = [res.rows];
			});
		}
	},
	methods: {
		sexSelect(e) {
			this.model1.sexLabel = e.value[0].label;
			this.model1.sex = e.value[0].id;
			this.showSex = false;
		},
		medicalHistoryStatusSelectCopy(e) {
			this.medicalHistoryStatusShow = false;
			this.model1.medicalHistoryStatusLabel = e.value[0].label;
			this.model1.medicalHistoryStatus = e.value[0].id;
		},
		maritalStatusSelectCopy(e) {
			this.maritalStatusShow = false;
			this.model1.maritalStatusLabel = e.value[0].label;
			this.model1.maritalStatus = e.value[0].id;
		},
		educationSelect(e) {
			this.model1.education = e.value[0].id;
			this.model1.educationLabel = e.value[0].label;
			this.educationShow = false;
		},
		enterpriseDeptSelect(e) {
			this.model1.enterpriseDeptId = e.value[0].id;
			this.model1.enterpriseDept = e.value[0].label;
			this.enterpriseDeptShow = false;
		},
		submit() {
			// this.$tab.navigateTo(`/subset/pages/personInfo/evaluateQuestion?appraisalId=${this.appraisalId}&qrId=${this.qrId}`);
			this.$refs.uForm
				.validate()
				.then((res) => {
					let sysUser = {
						nickName: this.model1.nickName,
						age: this.model1.age,
						sex: this.model1.sex,
						phonenumber: this.model1.phoneNumber,
						education: this.model1.education,
						occupation: this.model1.occupation,
						maritalStatus: this.model1.maritalStatus,
						medicalHistoryStatus: this.model1.medicalHistoryStatus,
						medicalHistoryDescribe: this.model1.medicalHistoryDescribe,
						enterpriseDeptId: this.model1.enterpriseDeptId,
						enterpriseDeptName: this.model1.enterpriseDept
					};
					uni.setStorageSync('SET_PERSON_INFO', JSON.stringify(sysUser));
					this.$store.commit('SET_PERSON_INFO', sysUser);
					// id为测评id
					this.$tab.navigateTo(`/subset/pages/personInfo/evaluateQuestion?appraisalId=${this.appraisalId}&qrId=${this.qrId}`);
					// addConsultationRecord(obj).then((res) => {
					// 	this.$modal.showToast('新增档案成功');
					// 	this.$tab.redirectTo(`/subset/pages/consult/visitorProfile/archiveList`);
					// });
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		hideKeyboard() {
			uni.hideKeyboard();
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style scoped lang="scss">
.vistorProFile {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	overflow: hidden;

	.scrollWrap {
		width: 100%;
		height: calc(100% - 166rpx);
		padding: 20rpx 0;

		.wrap {
			width: calc(100% - 60rpx);
			// min-height: 100%;
			margin: auto;

			> view:nth-child(1) {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 20rpx 50rpx 20rpx;
				box-sizing: border-box;
				.logo {
					width: 100%;
					border-bottom: 1rpx solid #f5f5f5;
					display: flex;
					padding-bottom: 30rpx;

					> image {
						width: 48rpx;
						height: 40rpx;
						margin-left: 20rpx;
					}

					> view {
						width: calc(100% - 48rpx);
						text-align: left;
						padding-left: 20rpx;
					}

					// position: absolute;
					// left: -10rpx;
					// top: 10rpx;
				}

				// > view:nth-child(1) {
				// 	font-size: 40rpx;
				// 	color: #000;
				// 	width: 100%;
				// 	text-align: left;
				// }

				// > view:nth-child(2) {
				// 	font-size: 26rpx;
				// 	color: #c6c6c6;
				// 	width: 100%;
				// 	text-align: left;
				// 	margin: 30rpx 0;
				// }
			}
		}
	}

	.btn {
		width: 100%;
		height: 166rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 80rpx;
		box-sizing: border-box;

		> view {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #ffffff;
			background: #5c83fd;
			border-radius: 42rpx;
		}
	}

	::v-deep .u-form {
		width: calc(100% - 60rpx);
		margin: auto;
	}

	::v-deep .u-form-item__body {
		padding: 26rpx 0;
	}
}
</style>
